<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>svg</title>
<link rel="stylesheet" href="/assets/css/index.css">
  Minimal Mistakes Jekyll Theme 4.11.2 by Michael Rose
  Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
  Free for personal and commercial use under the MIT license
  https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE.txt
-->
<html lang="zh" class="js fontawesome-i2svg-active fontawesome-i2svg-complete"><head>
    <meta charset="utf-8">

<!-- begin _includes/seo.html --><title>用文档表示的SVG图像 ： 使用minimal-mistakes主题的Jekyll网站</title>
<meta name="description" content="">



<meta property="og:type" content="article">
<meta property="og:locale" content="zh_CN">
<meta property="og:site_name" content="使用minimal-mistakes主题的Jekyll网站">
<meta property="og:title" content="用文档表示的SVG图像">
<meta property="og:url" content="https://wuxue_newmedia.gitee.io/minimal-mistakes/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/svg-editing/">


  <meta property="og:description" content="">







  <meta property="article:published_time" content="2018-06-12T00:00:00+08:00">





  

  


<style type="text/css">svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1em}.svg-inline--fa.fa-stack-2x{height:2em;width:2em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}</style><link rel="canonical" href="https://wuxue_newmedia.gitee.io/minimal-mistakes/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/svg-editing/">







  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Person",
      "name": "吴雪",
      "url": "https://wuxue_newmedia.gitee.io/minimal-mistakes",
      "sameAs": null
    }
  </script>







<!-- end _includes/seo.html -->


<link href="/minimal-mistakes/feed.xml" type="application/atom+xml" rel="alternate" title="使用minimal-mistakes主题的Jekyll网站 Feed">

<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>
  document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
</script>

<!-- For all browsers -->
<link rel="stylesheet" href="/minimal-mistakes/assets/css/main.css">

<!--[if lte IE 9]>
  <style>
    /* old IE unsupported flexbox fixes */
    .greedy-nav .site-title {
      padding-right: 3em;
    }
    .greedy-nav button {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
    }
  </style>
<![endif]-->


    <!-- start custom head snippets -->

<!-- insert favicons. use https://realfavicongenerator.net/ -->

<!-- end custom head snippets -->

  <style id="fit-vids-style">.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style></head>

  <body class="layout--single" style="margin-bottom: 200.5px;">

    <!--[if lt IE 9]>
<div class="notice--danger align-center" style="margin: 0;">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
<![endif]-->

    <div class="masthead">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
        <a class="site-title" href="/minimal-mistakes/">使用minimal-mistakes主题的Jekyll网站</a>
        <ul class="visible-links">
          
            
            <li class="masthead__menu-item">
              <a href="https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/">Quick-Start Guide</a>
            </li>
          
            
            <li class="masthead__menu-item">
              <a href="https://mmistakes.github.io/minimal-mistakes/about/">About</a>
            </li>
          
            
            
          
            
            
          
            
            
          
        </ul>
        
        <button class="greedy-nav__toggle" type="button" count="3" style="">
          <span class="visually-hidden">切换菜单</span>
          <div class="navicon"></div>
        </button>
        <ul class="hidden-links hidden"><li class="masthead__menu-item">
              <a href="https://wuxue_newmedia.gitee.io/minimal-mistakes/year-archive/">Sample Posts</a>
            </li><li class="masthead__menu-item">
              <a href="https://wuxue_newmedia.gitee.io/minimal-mistakes/collection-archive/">Sample Collections</a>
            </li><li class="masthead__menu-item">
              <a href="https://wuxue_newmedia.gitee.io/minimal-mistakes/sitemap/">Sitemap</a>
            </li></ul>
      </nav>
    </div>
  </div>
</div>

    <div class="initial-content">
      



<div id="main" role="main">
  
  <div class="sidebar sticky">
  


<div itemscope="" itemtype="http://schema.org/Person">

  

  <div class="author__content">
    
      <h3 class="author__name" itemprop="name">Your Name</h3>
    
    
      <p class="author__bio" itemprop="description">
        I am an amazing person.
      </p>
    
  </div>

  <div class="author__urls-wrapper">
    <button class="btn btn--inverse">关注</button>
    <ul class="author__urls social-icons">
      
        <li itemprop="homeLocation" itemscope="" itemtype="http://schema.org/Place">
          <svg class="svg-inline--fa fa-map-marker-alt fa-w-12 fa-fw" aria-hidden="true" data-prefix="fas" data-icon="map-marker-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg><!-- <i class="fas fa-fw fa-map-marker-alt" aria-hidden="true"></i> --> <span itemprop="name">Somewhere</span>
        </li>
      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      

      <!--
  <li>
    <a href="http://link-to-whatever-social-network.com/user/" itemprop="sameAs">
      <i class="fas fa-fw" aria-hidden="true"></i> Custom Social Profile Link
    </a>
  </li>
-->
    </ul>
  </div>
</div>

  
  </div>


  <article class="page" itemscope="" itemtype="http://schema.org/CreativeWork">
    <meta itemprop="headline" content="用文档表示的SVG图像">
    <meta itemprop="description" content="">
    <meta itemprop="datePublished" content="June 12, 2018">
    

    <div class="page__inner-wrap">
      
        <header>
          <h1 id="page-title" class="page__title" itemprop="headline">用文档表示的SVG图像
</h1>
          
            <p class="page__meta"><svg class="svg-inline--fa fa-clock fa-w-16" aria-hidden="true" data-prefix="far" data-icon="clock" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg><!-- <i class="far fa-clock" aria-hidden="true"></i> --> 




  少于 1 分钟读完
</p>
          
        </header>
      

      <section class="page__content" itemprop="text">
        
        
<aside class="sidebar__right">
<nav class="toc">
    <header><h4 class="nav__title"><svg class="svg-inline--fa fa-file-alt fa-w-12" aria-hidden="true" data-prefix="fas" data-icon="file-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm64 236c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-64c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8zm0-72v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm96-114.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"></path></svg><!-- <i class="fas fa-file-alt"></i> --> Getting Started</h4></header>
<ul class="toc__menu" id="markdown-toc">
  <li><a href="#svg的根元素" id="markdown-toc-svg的根元素">SVG的根元素</a></li>
  <li><a href="#svg的命名空间" id="markdown-toc-svg的命名空间">SVG的命名空间</a></li>
  <li><a href="#svg的标题和描述标签" id="markdown-toc-svg的标题和描述标签">SVG的标题和描述标签</a></li>
  <li><a href="#defs标签" id="markdown-toc-defs标签">defs标签</a></li>
  <li><a href="#元素g" id="markdown-toc-元素g">元素g</a></li>
  <li><a href="#svg形状元素" id="markdown-toc-svg形状元素">SVG形状元素</a></li>
  <li><a href="#svg的路径" id="markdown-toc-svg的路径">SVG的路径</a></li>
</ul>

  </nav>
</aside>

<p>SVG是使用XML（eXtensible Markup Language， 可拓展标记语言）来进行描述的，所以不仅机器可以阅读和理解SVG图像，我们也可以。</p>

<p><img src="https://wuxue_newmedia.gitee.io/minimal-mistakes/images/Star.svg" alt="星星SVG图"></p>

<p>此图代码如下，注意其SVG标记语言：</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp">&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;</span>
<span class="nt">&lt;svg</span> <span class="na">width=</span><span class="s">"198px"</span> <span class="na">height=</span><span class="s">"188px"</span> <span class="na">viewBox=</span><span class="s">"0 0 198 188"</span> <span class="na">version=</span><span class="s">"1.1"</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">xmlns:xlink=</span><span class="s">"http://www.w3.org/1999/xlink"</span> <span class="na">xmlns:sketch=</span><span class="s">"http://www.bohemiancoding.com/sketch/ns"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch --&gt;</span>
    <span class="nt">&lt;title&gt;</span>Star 1<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;desc&gt;</span>Created with Sketch.<span class="nt">&lt;/desc&gt;</span>
    <span class="nt">&lt;defs&gt;&lt;/defs&gt;</span>
    <span class="nt">&lt;g</span> <span class="na">id=</span><span class="s">"Page-1"</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">stroke-width=</span><span class="s">"1"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">fill-rule=</span><span class="s">"evenodd"</span> <span class="na">sketch:type=</span><span class="s">"MSPage"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;polygon</span> <span class="na">id=</span><span class="s">"Star-1"</span> <span class="na">stroke=</span><span class="s">"#979797"</span> <span class="na">stroke-width=</span><span class="s">"3"</span> <span class="na">fill=</span><span class="s">"#F8E81C"</span> <span class="na">sketch:type=</span><span class="s">"MSShapeGroup"</span> <span class="na">points=</span><span class="s">"99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "</span><span class="nt">&gt;&lt;/polygon&gt;</span>
    <span class="nt">&lt;/g&gt;</span>
<span class="nt">&lt;/svg&gt;</span>
</code></pre></div></div>

<h2 id="svg的根元素">SVG的根元素</h2>

<p>SVG的根元素有width、height和viewbox属性。</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;svg width="198px" height="188px" viewBox="0 0 198 188"
</code></pre></div></div>

<p>这三个属性在SVG展示的时候都起到了十分重要的作用。</p>

<p>宽度和高度属性对于创造一个视口十分有用。透过这个定义的视口，我们可以看到内部定义的SVG形状。和普通的Web页面一样，SVG的内容可能会比视口大，但是这不意味着多余的部分 就不存在，只是我们看不到而已。</p>

<p>另一方面，视框（viewbox）则定义了SVG中所有形状都需要遵循的坐标系。</p>

<p>你可以把视框值0 0 198 198视为对矩形左上角和右下角的描述。前两个值被称为min-x 和min-y，用于描述左上角的位置。而接下来的两个值被称作宽度和高度，可以描述右下角的位置。</p>

<p>因此viewbox属性可以让你缩放图片。例如，你可以这么设置viewbox属性： 
    &lt;svg width=”198px” height=”188px” viewBox=”0 0 99 94”</p>

<p>那么其中的形状为了填满SVG的宽度和高度，就会被放大。</p>

<h2 id="svg的命名空间">SVG的命名空间</h2>

<p>SVG会有一个由生成它的图形编辑程序定义的命名空间（xmlns是XML命名空间的缩写）。</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"   
</code></pre></div></div>

<p>这些命名空间往往只是在生成SVG的程序中使用，所以在Web页面上展示SVG的时候它们并不是必需的。因此在优化流程中，为了减小SVG的大小，通常会把它们去掉。</p>

<h2 id="svg的标题和描述标签">SVG的标题和描述标签</h2>

<p>title和desc标签提高了SVG文档的可读性。</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;title&gt;Star 1&lt;/title&gt;   
&lt;desc&gt;Created with Sketch.&lt;/desc&gt; 
</code></pre></div></div>

<p>这些标签可以用来在图像不可见的情况下描述图像的内容。然而，当SVG图片被应用为背景 图片的时候，可以去除这些标签来减小文件大小。</p>

<h2 id="defs标签">defs标签</h2>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;defs&gt;&lt;/defs&gt;  
</code></pre></div></div>

<p>这是一个十分重要的元素，它是用于储存所有可以复用 的元素定义的地方，如梯度、符号、路径等。</p>

<h2 id="元素g">元素g</h2>

<p>g元素能把其他元素捆绑在一起。例如，你要画一辆车的SVG，你会把用来构成车轮的形状 用g标签集合起来。</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fillrule=" evenodd" sketch:type="MSPage"&gt; 
</code></pre></div></div>

<p>在g标签中我们可以看到先前的命名空间。这会有助于图形编辑软件再次打开这个图像，但 是它对于这个图片在其他地方展示并没有影响。</p>

<h2 id="svg形状元素">SVG形状元素</h2>

<p>下例节点是一个多边形（polygon）。</p>

<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "&gt;&lt;/polygon&gt;  
</code></pre></div></div>

<p>SVG拥有一系列可用的现成形状（path、rect、circle、ellipse、line、polyline、 polygon）。</p>

<h2 id="svg的路径">SVG的路径</h2>

<p>SVG路径和其他SVG形状有所区别，因为它们是由任意数量的连接点组成的（允许你自由创造你想要的形状）。<br>
这是SVG文件的价值所在。SVG的代码可以手写，也可以利用图像工具来生成。</p>


        
      </section>

      <footer class="page__meta">
        
        
  


  
  
  

  <p class="page__taxonomy">
    <strong><svg class="svg-inline--fa fa-tags fa-w-20 fa-fw" aria-hidden="true" data-prefix="fas" data-icon="tags" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg><!-- <i class="fas fa-fw fa-tags" aria-hidden="true"></i> --> 标签: </strong>
    <span itemprop="keywords">
    
      
      
      <a href="/minimal-mistakes/tags/#svg" class="page__taxonomy-item" rel="tag">svg</a>
    
    </span>
  </p>




  


  
  
  

  <p class="page__taxonomy">
    <strong><svg class="svg-inline--fa fa-folder-open fa-w-18 fa-fw" aria-hidden="true" data-prefix="fas" data-icon="folder-open" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><!-- <i class="fas fa-fw fa-folder-open" aria-hidden="true"></i> --> 分类: </strong>
    <span itemprop="keywords">
    
      
      
      <a href="/minimal-mistakes/categories/#%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" class="page__taxonomy-item" rel="tag">网页设计</a>
    
    </span>
  </p>


        
          <p class="page__date"><strong><svg class="svg-inline--fa fa-calendar-alt fa-w-14 fa-fw" aria-hidden="true" data-prefix="fas" data-icon="calendar-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M436 160H12c-6.6 0-12-5.4-12-12v-36c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48v36c0 6.6-5.4 12-12 12zM12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm116 204c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40z"></path></svg><!-- <i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i> --> 更新时间:</strong> <time datetime="2018-06-12T00:00:00+08:00">June 12, 2018</time></p>
        
      </footer>

      <section class="page__share">
  
    <h4 class="page__share-title">分享</h4>
  

  <a href="https://twitter.com/intent/tweet?text=%E7%94%A8%E6%96%87%E6%A1%A3%E8%A1%A8%E7%A4%BA%E7%9A%84SVG%E5%9B%BE%E5%83%8F%20https%3A%2F%2Fwuxue_newmedia.gitee.io%2Fminimal-mistakes%2F%25E7%25BD%2591%25E9%25A1%25B5%25E8%25AE%25BE%25E8%25AE%25A1%2Fsvg-editing%2F" class="btn btn--twitter" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="分享 Twitter"><svg class="svg-inline--fa fa-twitter fa-w-16 fa-fw" aria-hidden="true" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg><!-- <i class="fab fa-fw fa-twitter" aria-hidden="true"></i> --><span> Twitter</span></a>

  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwuxue_newmedia.gitee.io%2Fminimal-mistakes%2F%25E7%25BD%2591%25E9%25A1%25B5%25E8%25AE%25BE%25E8%25AE%25A1%2Fsvg-editing%2F" class="btn btn--facebook" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="分享 Facebook"><svg class="svg-inline--fa fa-facebook fa-w-14 fa-fw" aria-hidden="true" data-prefix="fab" data-icon="facebook" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path></svg><!-- <i class="fab fa-fw fa-facebook" aria-hidden="true"></i> --><span> Facebook</span></a>

  <a href="https://plus.google.com/share?url=https%3A%2F%2Fwuxue_newmedia.gitee.io%2Fminimal-mistakes%2F%25E7%25BD%2591%25E9%25A1%25B5%25E8%25AE%25BE%25E8%25AE%25A1%2Fsvg-editing%2F" class="btn btn--google-plus" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="分享 Google Plus"><svg class="svg-inline--fa fa-google-plus fa-w-16 fa-fw" aria-hidden="true" data-prefix="fab" data-icon="google-plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" data-fa-i2svg=""><path fill="currentColor" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm-70.7 372c-68.8 0-124-55.5-124-124s55.2-124 124-124c31.3 0 60.1 11 83 32.3l-33.6 32.6c-13.2-12.9-31.3-19.1-49.4-19.1-42.9 0-77.2 35.5-77.2 78.1s34.2 78.1 77.2 78.1c32.6 0 64.9-19.1 70.1-53.3h-70.1v-42.6h116.9c1.3 6.8 1.9 13.6 1.9 20.7 0 70.8-47.5 121.2-118.8 121.2zm230.2-106.2v35.5H372v-35.5h-35.5v-35.5H372v-35.5h35.5v35.5h35.2v35.5h-35.2z"></path></svg><!-- <i class="fab fa-fw fa-google-plus" aria-hidden="true"></i> --><span> Google+</span></a>

  <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fwuxue_newmedia.gitee.io%2Fminimal-mistakes%2F%25E7%25BD%2591%25E9%25A1%25B5%25E8%25AE%25BE%25E8%25AE%25A1%2Fsvg-editing%2F" class="btn btn--linkedin" onclick="window.open(this.href, 'window', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" title="分享 LinkedIn"><svg class="svg-inline--fa fa-linkedin fa-w-14 fa-fw" aria-hidden="true" data-prefix="fab" data-icon="linkedin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg><!-- <i class="fab fa-fw fa-linkedin" aria-hidden="true"></i> --><span> LinkedIn</span></a>
</section>


      
  <nav class="pagination">
    
      <a href="/minimal-mistakes/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/svg-history/" class="pagination--pager" title="SVG的历史
">向前</a>
    
    
      <a href="#" class="pagination--pager disabled">向后</a>
    
  </nav>

    </div>

    
  </article>

  
  
    <div class="page__related">
      <h4 class="page__related-title">猜您还喜欢</h4>
      <div class="grid__wrapper">
        
          



<div class="grid__item">
  <article class="archive__item" itemscope="" itemtype="http://schema.org/CreativeWork">
    
      <div class="archive__item-teaser">
        <img src="/minimal-mistakes/500x300.png" alt="">
      </div>
    
    <h2 class="archive__item-title" itemprop="headline">
      
        <a href="/minimal-mistakes/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/svg-history/" rel="permalink">SVG的历史
</a>
      
    </h2>
    
      <p class="page__meta"><svg class="svg-inline--fa fa-clock fa-w-16" aria-hidden="true" data-prefix="far" data-icon="clock" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg><!-- <i class="far fa-clock" aria-hidden="true"></i> --> 




  少于 1 分钟读完
</p>
    
    <p class="archive__item-excerpt" itemprop="description">
</p>
  </article>
</div>
        
      </div>
    </div>
  
  
</div>
    </div>

    

    <div class="page__footer">
      <footer>
        <!-- start custom footer snippets -->

<!-- end custom footer snippets -->
        <div class="page__footer-follow">
  <ul class="social-icons">
    
      <li><strong>关注:</strong></li>
    
    
    
    
    
    
    <li><a href="/minimal-mistakes/feed.xml"><svg class="svg-inline--fa fa-rss-square fa-w-14 fa-fw" aria-hidden="true" data-prefix="fas" data-icon="rss-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path></svg><!-- <i class="fas fa-fw fa-rss-square" aria-hidden="true"></i> --> Feed</a></li>
  </ul>
</div>

<div class="page__footer-copyright">© 2018 刘炜豪. 技术来自于 <a href="https://jekyllrb.com" rel="nofollow">Jekyll</a> &amp; <a href="https://mademistakes.com/work/minimal-mistakes-jekyll-theme/" rel="nofollow">Minimal Mistakes</a>.</div>

      </footer>
    </div>

    
  <script src="/minimal-mistakes/assets/js/main.min.js"></script>
  <script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>







  
</body></html>